{% extends "base.html" %}

{% block stylesheets %}
<style>
	.hide-text { text-overflow: ellipsis; overflow: hidden; }
	.dialog-inner {padding-bottom: 30px;}
	.category-header {text-align: center}
	.challenge-wrapper {padding: 5px;}
	.challenge-button {width: 100%; height:100px;}
	.challenge-button:hover {opacity: 0.9;}
	.submit-row {padding-top: 0px; padding-right: 0px; padding-left: 0px;}
	.disabled-button {background-color: #EEEEEE}

	.file-button {text-decoration: none; color: #fff;}
	.file-button:hover {text-decoration: none; color: #fff;}
	.file-wrapper {padding: 10px; transition: all 0.5s ease; cursor: pointer; color: #fff; width: 100%; text-overflow: ellipsis; overflow: hidden;}
	.file-button {cursor: pointer;}
	.file-button-wrapper {padding: 0px 10px;}

	.close-text {color: #ccc;position: relative;top: -25px;right: -15px;cursor: pointer;}
	.chal-desc {padding-left: 30px; padding-right: 30px;}
	.key-submit {padding-top: 14px; padding-right: 10px;}
	.notification-row {padding-left: 10px;padding-right: 10px;}
	.input {padding-right: 5px;}
	.input-field:focus + .input-field,
	.input--filled .input-field {
		border-color: rgb(238, 238, 238);
	}
	.input-field:focus + .input-field,
	.input--filled .correct {
		border-color: rgb(223, 240, 216);
	}
	.input-field:focus + .input-field,
	.input--filled .wrong {
		border-color: rgb(255, 190, 190);
	}

	.input-field:focus + .input-field,
	.input--filled .too-fast {
		border-color: rgb(252, 248, 227);
	}

	button {
		padding: 1em 2em;
		outline: none;
		font-weight: 600;
		border: none;
		color: #fff;
		background: #c94e50;
	}

	.content {
		max-width: 1000px;
		padding: 2em;
		margin: 0 auto;
	}

	.button-wrap {
		padding: 2.5em 0 0;
		font-size: 1.25em;
	}

	button.trigger {
		background: #c94e50;
		color: #fff;
		border: none;
	}
</style>
{% endblock %}

{% block content %}

<div class="jumbotron home">
	<div class="container">
		<h1>Challenges</h1>
	</div>
</div>

{% if errors %}
	<div id='errors' class="row">
{% for error in errors %}
		<h1>{{ error }}</h1>
{% endfor %}
	</div>
{% endif %}

{% if admin or not errors %}
<div class="container main-container">
	<div id='challenges-board' class="row">
		<div class="text-center">
			<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw spinner"></i>
		</div>
	</div>
</div>

<input id="nonce" type="hidden" name="nonce" value="{{ nonce }}">

<div class="modal fade" id="hint-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header text-center">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h3>Hint</h3>
			</div>
			<div class="modal-body" id="hint-modal-body">
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="chal-window" tabindex="-1" role="dialog">
</div>
{% endif %}
{% endblock %}

{% block scripts %}
	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/utils.js"></script>
	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/multi-modal.js"></script>
	{% if admin or not errors %}
	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/chalboard.js"></script>
	{% endif %}
	<script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/style.js"></script>
{% endblock %}
